<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="60px">
        
        <div class="sol">
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button type="primary" class="items" @click="matte()">
                        特别说明事项
                    </el-button>
                </el-col>
                <el-col :span="3">
                    <el-button class="addition" @click="add()">
                        +添加
                    </el-button>
                </el-col>

                <el-col :span="9">
                    <el-form-item label="常用语:" prop="language">
                        <el-select v-model="ruleForm.language" placeholder="请选择" style="width:100%">
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="9">
                    <el-form-item label="内容:" prop="language">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.language">
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
                <el-row :gutter="24">
                    <el-col :span="22">
                <el-form-item label="备注:" prop="remark">
                        <el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="ruleForm.remark">
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="2">
                    <el-button type="primary" >
                        删除
                    </el-button>
                </el-col>

            </el-row>
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button type="primary" class="items">
                        法律法规
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button class="addition">
                        +添加
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button type="primary" class="items">
                        技术依据
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button class="addition">
                        +添加
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button type="primary" class="items">
                        行为依据
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button class="addition">
                        +添加
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button type="primary" class="items">
                        其他材料
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button class="addition">
                        +添加
                    </el-button>
                </el-col>
            </el-row>
            <el-row :gutter="24">
                <el-col :span="3">
                    <el-button type="primary" class="items">
                        作业记录
                    </el-button>
                </el-col>
                <el-col :span="2">
                    <el-button class="addition">
                        +添加
                    </el-button>
                </el-col>
            </el-row>

        </div>

        <el-row :gutter="24">
            <el-col :span="7">
                <el-form-item label="审核员:" prop="auditor">
                    <el-input placeholder="默认值" v-model="ruleForm.auditor" :disabled="true">
                    </el-input>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="作业日期:" prop="jobDate">
                    <span class="demonstration"></span>
                    <el-date-picker v-model="ruleForm.jobDate" type="datetimerange" start-placeholder="开始日期"
                        end-placeholder="结束日期" :default-time="['12:00:00']">
                    </el-date-picker>
                </el-form-item>
            </el-col>
            <el-col :span="7">
                <el-form-item label="报告有效期:" prop="indate">
                    <el-input v-model="ruleForm.indate" placeholder="半年/一年"></el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24">
            <el-col :span="7">
                <el-form-item label="报告一式:" prop="report">
                    <el-input-number v-model="ruleForm.report" @change="handleChange" :min="1" :max="10" label="描述文字">
                    </el-input-number>
                </el-form-item>
            </el-col>
            <el-col :span="9">
                <el-form-item label="评估方法:" prop="assessment">
                    <el-input placeholder="修复加和法" v-model="ruleForm.assessment" :disabled="true">
                    </el-input>
                </el-form-item>
            </el-col>
        </el-row>

        <el-row :gutter="24" class="foot">
            <el-col :span="4">
                <el-button type="primary" class="btn" style="margin-left:50%">
                    保存
                </el-button>
            </el-col>
            <el-col :span="12">
                <el-button type="success" class="btn">
                    备注
                </el-button>
            </el-col>
        </el-row>

        <add v-if="isShowAddDialog" :isShowAddDialog="isShowAddDialog" @dialogClose="dialogClose"></add>
        <matte v-if="isShowmatte" :isShowmatte="isShowmatte" @dialogClose="dialogClose"></matte>
    </el-form>
</template>
  
<script>
import add from "./workInformationadd.vue"
import matte from "./workInformationMatte.vue"
export default {
    components: {
        add,
        matte,
    },
    data() {
        return {

            ruleForm: {
                auditor: '',
                jobDate: '',
                indate: '',
                report: '',
                assessment: '',
                remark:''
            },
            options: [{
                value: '选项1',
                label: '选项1'
            }, {
                value: '选项2',
                label: '选项2'
            }, {
                value: '选项3',
                label: '选项3'
            }, {
                value: '选项4',
                label: '选项4'
            }, {
                value: '选项5',
                label: '选项5'
            }],
            rules: {
            },
            isShowAddDialog: false,
            isShowmatte: false,
        };

    },

    methods: {
        handleRemove(file, fileList) {
            // console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        dialogClose() {
            this.isShowAddDialog = false;
            this.isShowmatte = false;
        },
        add() {
            this.isShowAddDialog = true;
        },
        matte() {
            this.isShowmatte = true;
        },
    },
}
</script>
  
<style>
.items {
    width: 150px;
}

.btn {
    width: 100px;
}
</style>
  